<script setup lang="ts">
import { ref } from "vue";
import CategoryContent from "../components/category/CategoryContent.vue";
import CategoryNav from "../components/category/CategoryNav.vue";
import type { Category } from "../types/Book";

const selectedCategory = ref<Category>();

const handleCategorySelect = (category: Category) => {
  selectedCategory.value = category;
};
</script>

<template>
  <div class="category-page">
    <div class="page-content">
      <CategoryContent :category="selectedCategory" />
    </div>
    <div class="page-sidebar">
      <CategoryNav @select="handleCategorySelect" />
    </div>
  </div>
</template>

<style scoped>
.category-page {
  position: relative;
  min-height: 100vh;
  background: #f8f9fa;
}

.page-content {
  padding-right: 304px;
  min-height: 100vh;
}

.page-sidebar {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  width: 280px;
  padding: 24px 24px 24px 0;
  z-index: 10;
}

@media (max-width: 1024px) {
  .page-content {
    padding-right: 264px;
  }

  .page-sidebar {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding-right: 0;
  }

  .page-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -280px;
    right: auto;
    width: 280px;
    padding: 0;
    z-index: 999;
    transition: left 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
  }

  .page-sidebar.mobile-open {
    left: 0;
  }
}
</style>
